<template>
  <div>
    <input v-model="searchid" placeholder="请输入员工工号"/>&nbsp;&nbsp;
    <el-button type="info" size="mini" @click="searchStaff">查询员工</el-button>
    <el-button type="info" size="mini" @click="deleteSearch" :disabled="isNew?false:true">取消查询</el-button>
    <el-table :data="isNew?newStaff:staff" height="400" border style="width: 100%">
      <el-table-column prop="id" label="工号" width="70"> </el-table-column>
      <el-table-column prop="uname" label="姓名" width="80"> </el-table-column>
      <el-table-column prop="sex" label="性别" width="60"> </el-table-column>
      <el-table-column prop="apartment" label="部门" width="70"> </el-table-column>
      <el-table-column prop="uposition" label="职位" width="100"> </el-table-column>
      <el-table-column prop="salary" label="薪资K" width="60"> </el-table-column>
      <el-table-column prop="check" label="出勤率%" width="80"> </el-table-column>
      <el-table-column prop="email" label="邮箱" width="170"> </el-table-column>
      <el-table-column prop="phone" label="电话" width="130"> </el-table-column>
      <el-table-column label="操作" width="160">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
    </el-table>

  </div>
</template>

<script>
export default {
  name: "StaffList",
  data() {
    return {
      searchid:'',
      isNew:false,
      newStaff:[],
    }
  },
  methods:{
    // 编辑
      handleEdit(index, row) {
        console.log(index, row);
      },
      // 删除
      handleDelete(index,row) {
        this.$store.dispatch('removeStaff',row.id)
      },
    // 查找某员工
    searchStaff(){
      if(this.searchid=='/'){
        this.isNew=false
      }else if(this.searchid==''){
        alert('请输入员工工号')
      }else{
        let isnewStaff=this.$store.state.staff.staff.filter((item)=>{
        return item.id==this.searchid
      })
      if(isnewStaff.length>0){
        // 查询到对应员工数据
        this.newStaff=isnewStaff
        this.isNew=true
        
      }else{
        // 未查询到
        alert('未查询到该员工')
      }
    }
      },
      // 取消查询，恢复到未查询的状态
      deleteSearch(){
        this.isNew=false
        this.searchid=''
      }
  },
  mounted(){
    this.$store.dispatch('showstaff')
  },
  computed:{
    staff(){
      return this.$store.state.staff.staff
    },
  }
};
</script>

<style lang='less' scoped>
  div{
    input{
      width:150px;
      height:21px;
      outline: none;
    }
  } 
</style>